<template>
	<div>
		<el-row class="bg-top">
			<el-col :span="24">
				<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
					<el-form-item label="查询时间">
						<el-date-picker v-model="dataForm.startTime" value-format="yyyy-MM-dd" type="date"
							:picker-options="pickerOptions0" placeholder="开始时间"></el-date-picker>
						<span class="queryText">至</span>
						<el-date-picker v-model="dataForm.endTime" value-format="yyyy-MM-dd" type="date"
							:picker-options="pickerOptions1" placeholder="结束时间"></el-date-picker>
					</el-form-item>
					<el-form-item label="状态：">
						<el-select v-model="dataForm.status" filterable clearable placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getDataList()">搜索</el-button>
						<el-button type="info" @click="reset()">重置</el-button>
						<!-- <el-button type="info" v-loading.fullscreen.lock="fullscreenLoading"
							@click="exportHandleNew()">{{ $t('export') }}</el-button> -->
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row class="bg-bottom">
			<el-col :span="24" class="titleContent">
				<span class="titleText">系统日志列表</span>
				<div class="print" @click="printTable()">
					<img src="../../../assets/img/dayinji.png" alt="">
					<span>打印</span>
				</div>
			</el-col>
			<el-table v-loading="dataListLoading" ref="multipleTable" :data="dataList" border
				@sort-change="dataListSortChangeHandle" style="width: 100%;">
				<el-table-column type="selection" header-align="center" align="center"></el-table-column>
				<el-table-column prop="creatorName" :label="$t('logOperation.creatorName')" header-align="center"
					align="center"></el-table-column>
				<el-table-column prop="status" :label="$t('logOperation.status')" header-align="center" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status === 0" size="small"
							type="danger">{{ $t('logOperation.status0') }}</el-tag>
						<el-tag v-else size="small" type="success">{{ $t('logOperation.status1') }}</el-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="ip" :label="$t('logOperation.ip')" header-align="center" align="center"></el-table-column> -->
				<el-table-column prop="createDate" label="操作时间" header-align="center" align="center"
					width="180"></el-table-column>
				<el-table-column prop="operation" label="操作信息" header-align="center" align="center"></el-table-column>
			</el-table>
			<el-col :span="24" style="position:relative">
				<div class="export">
					<!-- <el-checkbox v-model="checked" @change="toggleSelection(dataList)">全选</el-checkbox> -->
					<span class="textColor" v-loading.fullscreen.lock="fullscreenLoading"
						@click="exportHandleNew()">批量导出</span>
				</div>
				<el-pagination background :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
					:total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
					@current-change="pageCurrentChangeHandle">
				</el-pagination>
			</el-col>
		</el-row>
		<uploadTime ref="uploadTime" v-if="uploadTimeStatus"></uploadTime>
	</div>
</template>

<script>
	import mixinViewModule from '@/mixins/view-module'
	import printJS from 'print-js'
	import utils from "@/utils/utils"
	import uploadTime from "@/components/uploadTime"
	export default {
		mixins: [mixinViewModule],
		components: {
			uploadTime
		},
		data() {
			return {
				mixinViewModuleOptions: {
					getDataListURL: '/sys/log/operation/page',
					getDataListIsPage: true,
					exportURL: '/sys/log/operation/export'
				},
				dataForm: {
					startTime: '',
					endTime: '',
					status: '',
					orderField: 'create_date',
					order: 'desc',
				},
				checked: false,
				options: utils.operStatus,
				pickerOptions0: { //结束时间不能大于开始时间
					disabledDate: (time) => {
						if (this.dataForm.endTime) {
							return time.getTime() > new Date(this.dataForm.endTime).getTime();
						}
					}
				},
				pickerOptions1: {
					disabledDate: (time) => {
						if (this.dataForm.startTime) {
							return time.getTime() < new Date(this.dataForm.startTime).getTime() - 1 * 24 * 60 * 60 *
								1000; //可以选择同一天
						}
					}
				},
				uploadTimeStatus: false,
			}
		},
		methods: {
			exportHandleNew() {
				this.uploadTimeStatus = true
				this.$nextTick(() => {
					this.$refs.uploadTime.init(this.dataForm, this.mixinViewModuleOptions.exportURL)
				})
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row)
					})
				} else {
					this.$refs.multipleTable.clearSelection()
				}
			},
			reset() {
				this.dataForm = {}
				this.$http.get('/sys/log/operation/page').then(res => {
					if (res.data.code == 0) {
						this.dataList = res.data.data.list
						this.total = res.data.data.total
					}
				})
			},
			//打印表格
			printTable() {
				this.$http.get(`/sys/log/operation/page?limit=${this.total}`).then(res => {
					let data = [];
					for (let i = 0; i < res.data.data.list.length; i++) {
						data.push({
							field1: i + 1,
							field2: res.data.data.list[i].creatorName,
							field3: res.data.data.list[i].status === 1 ? '成功' : '失败',
							field4: res.data.data.list[i].ip,
							field5: res.data.data.list[i].createDate,
							field6: res.data.data.list[i].operation,
						})
					}
					printJS({
						printable: data,
						properties: [{
							field: 'field1',
							displayName: '序号',
							columnSize: 1
						}, {
							field: 'field2',
							displayName: '用户名',
							columnSize: 1
						}, {
							field: 'field3',
							displayName: '状态',
							columnSize: 1
						}, {
							field: 'field4',
							displayName: '操作IP',
							columnSize: 1
						}, {
							field: 'field5',
							displayName: '操作时间',
							columnSize: 1
						}, {
							field: 'field6',
							displayName: '操作信息',
							columnSize: 1
						}],
						type: 'json',
						header: '系统日志',
						//样式设置
						gridStyle: 'border:2px solid #000000; text-align:center',
						gridHeaderStyle: 'color:#000000; border:2px solid #000000;'
					})
				}).catch(function(error) { // 请求失败处理
				});
			}
		},
	}
</script>
<style scoped>
	.bg-top {
		height: 7.6vh;
		min-height: 76px;
		border-radius: 10px;
		/* padding: 2.5vh 1.4vw 1.8vh 1.4vw; */
		padding: 0 1.8vw;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.bg-top>>>.el-form--inline .el-form-item__content,
	.el-form--inline .el-form-item {
		vertical-align: middle !important;
	}

	.bg-top>>>.el-form-item {
		margin-bottom: 0;
	}

	.el-form-item {
		margin-bottom: 0;
	}

	.queryText {
		display: inline-block;
		margin: 0 0.5vw;
	}

	.bg-bottom {
		height: 75.7vh;
		margin-top: 1.8vh;
		padding: 2.7vh 1.87vw 1.85vh 1vw;
		border-radius: 10px;
		background-color: #fff;
	}

	.titleContent {
		display: flex;
		position: relative;
		height: 3.7vh;
		margin-bottom: 1.5vh
	}

	.titleText {
		height: 3.7vh;
		line-height: 3.7vh;
		font-size: 16px;
		display: inline-block;
	}

	.print {
		position: absolute;
		right: 0;
		top: 1.1vh;
		cursor: pointer;
	}

	.print img {
		margin-right: 0.26vw;
	}

	.print span {
		font-size: 14px;
		color: #279EFB;
	}

	.export {
		position: absolute;
		top: 1.85vh;
		width: 11vw;
		height: 1.85vh;
		font-size: 14px;
	}

	.export .textColor {
		color: #279EFB;
		margin-left: 0.5vw;
		cursor: pointer;
	}
</style>